<script setup lang="ts">

import * as echarts from 'echarts';
import 'echarts-gl';
import {onBeforeUnmount, onMounted, ref} from "vue";


const worker = new Worker(new URL('@/worker.js', import.meta.url))

let option = {
    grid3D: {

    },
    tooltip: {},
    xAxis3D: {
        name: '周期',
        type: 'value',
        min: 0,
        max: 100
    },
    yAxis3D: {
        name: '相位',
        type: 'value',
        interval: 90,
        max: 360,
        min: 0
    },
    zAxis3D: {
        name: '幅值',
        min: 0,
        max: 100
    },
    visualMap: {
        max: 100,
        dimension: 'Population'
    },
    dataset: {
        dimensions: [
            'Income',
            'Life Expectancy',
            'Population',
            'Country',
            {name: 'Year', type: 'ordinal'}
        ],
        source: []
    },
    series: [
        {
            type: 'bar3D',
            shading: 'lambert',
            bevelSmoothness: 2,
            // 开启大数据模式
            large: true,
            // 降采样
            sampling: 'average',
            // 数据量大于1万时开启高性能模式,如果没有大于1万;不会开启
            largeThreshold: 1000,
            // 关闭鼠标事件
            silent: true,
            // 用 dataset.dimensions 描述对应坐标位置
            encode: {
                x: 'Year',
                y: 'Country',
                z: 'Life Expectancy',
            },
            animation: false,
        }
    ]
}
onMounted(() => {
    let charts = echarts.init(document.getElementById('main'));
    charts.setOption(option);
    random()
    let onSetUp = () => {
        worker.onmessage = function (event) {
            charts.setOption({
                dataset: {
                    source: event.data
                }
            },);
        }
    }
    onSetUp();
})

let timer: any = null
let val = ref({
    time: 50,
    data: 10000
})
let random = () => {
    if(timer){
        clearInterval(timer)
        timer = null
    }
    timer = setInterval(() =>{
        worker.postMessage(val.value.data)
    } , val.value.time)
}


onBeforeUnmount(() => {
    // 关线程
    worker.terminate()
})
</script>

<template>
    <div style="width: 100%;height: 100%">
        时间(ms): <input type="text" placeholder="输入时间(ms)" v-model="val.time"> &nbsp;
        数据量: <input type="text" placeholder="输入数据量" v-model="val.data"> &nbsp;
        <input type="button" value="开始" @click="random" />
        <div id="main" style="height: 80%;width: 100%"></div>
    </div>
</template>

<style scoped>

</style>
